<!DOCTYPE html><html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../lib/simple-inheritance.js"></script>
	
	<script type="text/javascript" src="../util.js"></script>
	
	<script type="text/javascript" src="../util-dom.js"></script>
	<script type="text/javascript" src="../util-events.js"></script>
	<script type="text/javascript" src="../util-animation.js"></script>
	
	<!--
	<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery.animate-enhanced.min.js"></script>
	<script type="text/javascript" src="../util-dom-jQuery.js"></script>
	<script type="text/javascript" src="../util-events-jQuery.js"></script>
	<script type="text/javascript" src="../util-animation-jQuery.js"></script>
	-->
	
	<script type="text/javascript" src="../element-class.js"></script>
	<script type="text/javascript" src="../full-size-image-class.js"></script>
	<script type="text/javascript" src="../document-overlay-class.js"></script>
	<script type="text/javascript" src="../viewport-class.js"></script>
	<script type="text/javascript" src="../slider-item-class.js"></script>
	<script type="text/javascript" src="../slider-class.js"></script>
	<script type="text/javascript" src="../caption-class.js"></script>
	<script type="text/javascript" src="../toolbar-class.js"></script>
	<script type="text/javascript" src="../caption-toolbar-class.js"></script>
	<script type="text/javascript" src="../zoom-pan-rotate-class.js"></script>
	<script type="text/javascript" src="../photoswipe.js"></script>
		
	<script type="text/javascript">
	
		/* 
			Overview: 
			---------
			
			This is a debug version loading all int individual class files. 
			It will not run from the released "examples" folder. It needs to be run from
			"/src/examples/debug.html"
		
		*/
		
		// Here we are using the "Code.PhotoSwipe.Util.Events.domReady" function
		// to set the DOM ready event handler.
		// You could quite easily use $(document).ready() or document.addEventListener
		// as Code.PhotoSwipe.Util.Events.domReady is just a warpper for these
		Code.PhotoSwipe.Util.Events.domReady(function(e){
			
			var addEventListeners = true;
			
			if (addEventListeners){
				// Add event listeners
			
				// onBeforeShow
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeShow, function(e){
					
					console.log('onBeforeShow');
					
				});
				
				// onShow
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShow, function(e){
					
					console.log('onShow');
					
				});
				
				// onBeforeHide
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){
					
					console.log('onBeforeHide');
					
				});
				
				// onHide
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onHide, function(e){
					
					console.log('onHide');
					
				});
				
				// onShowNext
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
					
					console.log('onShowNext');
					
				});
		
				// onShowPrevious
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
					
					console.log('onShowPrevious');
					
				});
				
				// onDisplayImage
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
					
					console.log('onDisplayImage');
					
				});
				
				// onResetPosition
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
					
					console.log('onResetPosition');
					
				});
				
				// onSlideshowStart
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
					
					console.log('onSlideshowStart');
					
				});
				
				// onSlideshowStop
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
					
					console.log('onSlideshowStop');
					
				});
				
				// onBeforeCaptionAndToolbarShow
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
					
					console.log('onBeforeCaptionAndToolbarShow');
					
				});
				
				// onBeforeCaptionAndToolbarHide
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
					
					console.log('onBeforeCaptionAndToolbarHide');
					
				});
				
				// onViewportClick
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
					
					console.log('onViewportClick');
					
				});
				
				// onCaptionAndToolbarShow
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onCaptionAndToolbarShow, function(e){
					
					console.log('onCaptionAndToolbarShow');
					
				});
				
				// onCaptionAndToolbarHide
				Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onCaptionAndToolbarHide, function(e){
					
					console.log('onCaptionAndToolbarHide');
					
				});
			}
			
			
			var thumbEls = Code.photoSwipe('a', '#Gallery', {
			
				getImageSource: Code.PhotoSwipe.GetImageSource,
				getImageCaption: Code.PhotoSwipe.GetImageCaption,
				getImageMetaData: Code.PhotoSwipe.GetImageMetaData,
				fadeInSpeed: 250,
				fadeOutSpeed: 500,
				slideSpeed: 250,
				swipeThreshold: 50,
				swipeTimeThreshold: 250,
				loop: true,
				slideshowDelay: 3000,
				imageScaleMethod: 'fit', // Either "fit", "fitNoUpscale" or "zoom"
				preventHide: false,
				zIndex: 1000,
				backButtonHideEnabled: true,
				
				
				/* 
					iOS users can use two digit gestures to zoom in and out.
					Other's can only zoom in and pan around by double tapping / clicking
				*/ 
				allowUserZoom: true, 
				allowRotationOnUserZoom: true,
				maxUserZoom: 5.0,
				minUserZoom: 0.5,
				adjustUserPanToZoom: true,
				doubleClickSpeed: 300,
				doubleClickZoom: 2.5,
				
				captionAndToolbarHide: false,
				captionAndToolbarHideOnSwipe: true,
				captionAndToolbarFlipPosition: false,
				captionAndToolbarAutoHideDelay: 5000,
				captionAndToolbarOpacity: 0.8,
				captionAndToolbarShowEmptyCaptions: true		
				
			});
			
			console.log(thumbEls);
		
		});
		
		
	</script>
	
</head>
<body>

<div id="Header">
	<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>PhotoSwipe</h1>
	</div>
	
	
	<div id="Gallery">
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></div>
			
			<div class="gallery-item"><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></div>
			
			<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>
			
		</div>

	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></div>
			
			<div class="gallery-item"><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></div>
			
			<div class="gallery-item"><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></div>
	
		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
			
			<div class="gallery-item"><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
			
			<div class="gallery-item"><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>

		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></div>
			
			<div class="gallery-item"><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></div>
			
			<div class="gallery-item"><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></div>
	
		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></div>
			
			<div class="gallery-item"><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></div>
			
			<div class="gallery-item"><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" /></a></div>
	
		</div>
		
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" /></a></div>
			
			<div class="gallery-item"><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" /></a></div>
			
			<div class="gallery-item"><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></div>
	
		</div>
	
	</div>
	
	
</div>	

	
<div id="Footer">
	<p><small>&copy; 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>

	<div id="SocialLinks">
	<a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
	<a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
	<a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
	<a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
</div>

</body>
</html>